import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '',
    content: '',
    frame: 'vue',
    sex: 'unknown',
    fruit: ['apple'],
  }

  handleChange = (e) => {
    let v
    if (e.target.type === 'checkbox') {
      const idx = this.state.fruit.indexOf(e.target.value)
      if (idx !== -1) {
        const tempFruit = [...this.state.fruit]
        tempFruit.splice(idx, 1)
        v = tempFruit
      } else {
        v = [...this.state.fruit, e.target.value]
      }
    } else {
      v = e.target.value
    }
    this.setState({ [e.target.name]: v })
  }
  render() {
    return (
      <div>
        <ul>
          <li>
            <label htmlFor='username'>用户名</label>
            <input
              type='text'
              name='username'
              id='username'
              value={this.state.username}
              onChange={this.handleChange}
            />
          </li>
          <li>
            <label htmlFor='content'>其他信息</label>
            <textarea
              name='content'
              id='content'
              value={this.state.content}
              onChange={this.handleChange}
            ></textarea>
          </li>
          <li>
            <label htmlFor='frame'>框架</label>
            <select
              id='frame'
              name='frame'
              value={this.state.frame}
              onChange={this.handleChange}
            >
              <option value='react'>React</option>
              <option value='vue'>Vue</option>
              <option value='angular'>Angular</option>
            </select>
          </li>
          <li>
            <input
              type='radio'
              name='sex'
              id='male'
              value='male'
              checked={'male' === this.state.sex}
              onChange={this.handleChange}
            />
            <label htmlFor='male'>男</label>
            <input
              type='radio'
              name='sex'
              id='female'
              value='female'
              checked={'female' === this.state.sex}
              onChange={this.handleChange}
            />
            <label htmlFor='female'>女</label>
            <input
              type='radio'
              name='sex'
              id='unknown'
              value='unknown'
              checked={'unknown' === this.state.sex}
              onChange={this.handleChange}
            />
            <label htmlFor='unknown'>未知</label>
          </li>
          <li>
            <input
              type='checkbox'
              name='fruit'
              id='apple'
              value='apple'
              checked={this.state.fruit.includes('apple')}
              onChange={this.handleChange}
            />
            <label htmlFor='apple'>Apple</label>
            <input
              type='checkbox'
              name='fruit'
              id='orange'
              value='orange'
              checked={this.state.fruit.includes('orange')}
              onChange={this.handleChange}
            />
            <label htmlFor='orange'>Orange</label>
          </li>
        </ul>
      </div>
    )
  }
}
